<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Happy Valentine :)</title>
    <link
      rel="stylesheet"
    />
    <link rel="shortcut icon" type="image/png" href="./img/heart.svg" />
    <link rel="stylesheet" href="style/style.css" />
  </head>

  <body>
    <div class="container">
      <div class="one">
        <h1 class="one">
          Hey
          <span id="name">xyz</span>
        </h1>
        <p class="two" id="greetingText">I really like your name btw!</p>
      </div>
      <div class="three">
        <p>It's Valentine!!! :D</p>
      </div>
      <div class="four">
        <div class="text-box">
          <p class="hbd-chatbox">
            Happy Valentine's Day!! Yeee! Love and blah blah...
          </p>
          <p class="fake-btn">Send</p>
        </div>
      </div>
      <div class="five">
        <p class="idea-1">That's what I was going to do.</p>
        <p class="idea-2">But then I stopped.</p>
        <p class="idea-3">
          I realised, I wanted to do something <strong>special</strong>.
        </p>
        <p class="idea-4">Because,</p>
        <p class="idea-5">
          You are Special
          <span>:)</span>
        </p>
        <p class="idea-6">
          <span>S</span>
          <span>O</span>
        </p>
      </div>
      <div class="six">
        <img src="img/vector.jpg" alt="" class = "girl-dp" id="imagePath" />
        <div class="wish">
          <h3 class="wish-hbd">Happy Valentine's Day Gorgeous</h3>
          <h5 id="wishText">kuch kuch</h5>
        </div>
      </div>
      <div class="seven">
        <div class="baloons">
          <img src="img/balloon.svg" alt="" />
          <!-- <img src="img/music-note.svg" alt="" /> -->
          <img src="img/smiling.svg" />
          <img src="img/heart.svg" />
          <!-- <img src="img/happy.svg" alt="" /> -->
          <img src="img/balloon.svg" alt="" />
          <!-- <img src="img/music-note.svg" alt="" /> -->
          <!-- <img src="img/smiling.svg" /> -->
          <img src="img/heart.svg" />
          <img src="img/balloon.svg" alt="" />
          <img src="img/music-note.svg" alt="" />
          <img src="img/heart.svg" />
          <img src="img/balloon.svg" alt="" />
          <!-- <img src="img/music-note.svg" alt="" /> -->
          <!-- <img src="img/smiling.svg" /> -->
          
          <img src="img/heart.svg" />
          <img src="img/balloon.svg" alt="" />
          <img src="img/heart.svg" />
          <img src="img/heart.svg" />
          <img src="img/music-note.svg" alt="" />
          <img src="img/smiling.svg" />
         
          <img src="img/happy.svg" alt="" />
          <img src="img/balloon.svg" alt="" />
          <img src="img/heart.svg" />
          <!-- <img src="img/music-note.svg" alt="" /> -->
          <!-- <img src="img/heart.svg" />
          
          <img src="img/happy.svg" alt="" />
          <img src="img/balloon.svg" alt="" />
          <img src="img/music-note.svg" alt="" /> -->
          <img src="img/smiling.svg" />
          <!-- <img src="img/heart.svg" /> -->
          <!-- <img src="img/happy.svg" alt="" /> -->
        </div>
      </div>
      <div class="eight">
        <svg viewBox="0 0 40 40" xmlnssvg/heart.svg.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="20" r="20" />
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="20" r="20" />
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="20" r="20" />
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="20" r="20" />
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="20" r="20" />
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="20" r="20" />
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="20" r="20" />
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="20" r="20" />
        </svg>
      </div>
      <div class="nine">
        <p>Okay, now come back and tell me if you liked it.</p>
        <p id="replay">Or click, if you want to watch it again.</p>
        <p class="last-smile">:)</p>
      </div>
    </div>
  </body>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <script type="text/babel" src="script/main.js"></script>
</html>
